<template>
  <div class="contentText">
    <div class="header">
      <van-icon name="arrow-left" class="icon" @click="router.go(-1)" />
      <span>{{ header }}</span>
    </div>
    <div class="search">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="content">
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        success-text="刷新成功"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="list"
            v-for="(item, index) in data.list"
            :style="index % 2 ? 'margin-left: 4%' : ''"
            :key="index"
            @click="navToFn(item.id)"
          >
            <img :src="imgUrl + item.listImg" alt="" />
            <div class="title">{{ item.name }}</div>
            <div class="number">{{ item.number }}</div>
            <div class="box">
              <div class="money"><span>￥</span>{{ item.price }}</div>
              <div class="button start" v-if="item.productStatus == '0'">
                开抢
              </div>
              <div class="button end" v-else>售罄</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
  <teleport to="body">
    <div v-if="modalOpen" class="modalOpen">
      <div class="title">拍卖倒计时</div>
      <div class="content">{{ nowDateText }}</div>
      <div class="button" @click="modalOpen = false">确定</div>
    </div>
  </teleport>
</template>

<script>
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  onBeforeUnmount,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import publicFunction from "../public/refresh";
import { getActivePage, imgUrl } from "@/api/http.js";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const header = ref("");
    const isLoading = ref(false); // 下拉刷新
    const loading = ref(false); // 上拉加载
    const finished = ref(false); // 上拉加载是否加载完毕
    const data = reactive({
      list: [],
      total: null,
      pageNum: 1,
      pageSize: 6,
      searchVal: "",
    });
    const active = ref(0);
    const value = ref("");
    const type = ref(false);
    const router = useRouter();
    const route = useRoute();
    const getHeader = () => {
      switch (route.query.index) {
        case "0":
          header.value = "上午场";
          break;

        case "1":
          header.value = "下午场";
          break;

        case "2":
          header.value = "晚间场";
          break;

        default:
          break;
      }
      switch (route.query.type) {
        case "0":
          header.value += "体验区";
          break;

        case "1":
          header.value += "正式区";
          break;

        default:
          break;
      }
      console.log(header.value);
    };
    const onSearch = (val) => {
      onRefresh(val);
      console.log("搜索---", val);
    };
    const onCancel = () => {
      console.log("取消---");
    };

    const navToFn = (id) => {
      if (type.value) return getTime();
      router.push({
        path: "/goodsInfo",
        query: {
          id,
        },
      });
    };

    // 引入上拉刷新/下拉加载函数
    const { publicRefresh, publicLoad } = publicFunction();

    // 上拉刷新
    const onRefresh = async (val = null) => {
      data.searchVal = val;
      data.pageNum = 1;
      const params = {
        name: data.searchVal,
        activeType: JSON.parse(route.query.item).id,
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      };
      console.log("上拉刷新---", params);
      const refreshData = await publicRefresh(getActivePage, params);
      data.total = refreshData.data.total;
      data.list = refreshData.data.data;
      isLoading.value = false;
      finished.value = false;
      data.pageNum = 2;
      console.log("上拉刷新data.list---", data);
    };

    // 下拉加载
    const onLoadBool = ref(false);
    const onLoad = async () => {
      if (onLoadBool.value) return;
      onLoadBool.value = true;
      const params = {
        name: data.searchVal,
        activeType: JSON.parse(route.query.item).id,
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      };
      const loadData = await publicLoad(getActivePage, params);
      if (loadData.code === 500) {
        proxy.$toast.fail("登录过期，请重新登录");
        setTimeout(() => {
          router.push({
            path: "/login",
          });
        }, 2000);
        return;
      }
      data.total = loadData.data.total;
      onLoadBool.value = false;
      if (data.list.length >= data.total) return (finished.value = true);
      data.pageNum = data.pageNum + 1;
      data.list = data.list.concat(loadData.data.data);
    };

    const nowDate = ref();
    const nowDateText = ref();
    let timeOut = ref();

    const getInfo = () => {
      const data = JSON.parse(route.query.item);
      data.startTime = data.startTime.split(":").map((item) => Number(item));
      type.value = !data.type;

      if (type.value) {
        getTime();
        const month = 24 * 60 * 60;
        const date = new Date();
        let nowMonth = date.getHours(); // 时
        let nowMinutes = date.getMinutes(); // 分
        // let nowSeconds = date.getSeconds(); // 秒

        console.log(data.startTime[0], ">", nowMonth);
        console.log(data.startTime[1], ">", nowMinutes);
        timeOut = setInterval(() => {
          if (
            data.startTime[0] > nowMonth ||
            (data.startTime[0] == nowMonth && data.startTime[1] > nowMinutes)
          ) {
            const shengyu = getshengyu();
            nowDate.value = data.start - shengyu;
            nowDateText.value = getDate(nowDate.value);
            console.log(nowDate.value);
          } else {
            const shengyu = month - getshengyu();
            nowDate.value = shengyu + data.start;
            nowDateText.value = getDate(nowDate.value);
          }
        }, 1000);
      }
    };

    const getshengyu = () => {
      const date = new Date();
      let nowMonth = date.getHours(); // 时
      let nowMinutes = date.getMinutes(); // 分
      let nowSeconds = date.getSeconds(); // 秒
      return (nowMonth * 60 + nowMinutes) * 60 + nowSeconds;
    };

    const getDate = (date) => {
      const hours = parseInt(date / 60 / 60); //时
      const sinutes = parseInt((date - hours * 60 * 60) / 60); //分
      const seconds = date - hours * 60 * 60 - sinutes * 60; //秒
      return `${Number(hours) >= 10 ? hours : "0" + hours}：${
        Number(sinutes) >= 10 ? sinutes : "0" + sinutes
      }：${Number(seconds) >= 10 ? seconds : "0" + seconds}`;
    };

    const modalOpen = ref(false);
    const getTime = () => {
      modalOpen.value = true;
    };

    onBeforeUnmount(() => {
      clearInterval(timeOut);
    });

    onMounted(async () => {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      getInfo();
      getHeader();
      await nextTick();
    });

    return {
      header,
      router,
      route,
      active,
      onSearch,
      onCancel,
      value,
      onRefresh,
      isLoading,
      loading,
      finished,
      onLoad,
      data,
      navToFn,
      modalOpen,
      nowDateText,
      imgUrl,
      // timeOut,
    };
  },
});
</script>

<style lang="less" scoped>
.contentText {
  width: 100%;
  min-height: 100vh;
  color: var(--textColor);
  background-color: var(--backColorTwo);

  .header {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    background-color: #444;
    color: #fff;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 60px;
    text-align: center;
    position: relative;

    .icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .search {
    .van-search {
      background-color: transparent;

      /deep/ .van-search__content {
        border: 1px solid var(--backColor);
        background-color: transparent;
        border-radius: 30px;
      }

      /deep/ .van-search__action {
        color: var(--textColor);
      }

      /deep/ .van-cell {
        color: var(--textColor);
      }
    }
  }

  .van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 3% 0;

    /deep/ .van-list__finished-text {
      width: 100%;
    }

    .list {
      width: 48%;
      overflow: hidden;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      background-color: var(--backColor);

      img {
        width: 100%;
      }

      & > div {
        width: 100%;
        padding: 0 5%;
        margin-top: 10px;
      }

      .title {
        color: var(--textColor);
        font-size: 1rem;
        line-height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /*想省略几行就写几*/
        -webkit-box-orient: vertical;
      }

      .number {
        color: var(--textColorTwo);
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /*想省略几行就写几*/
        -webkit-box-orient: vertical;
      }

      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;

        .money {
          color: #ff0000;
          font-size: 1.125rem;

          span {
            font-size: 0.75rem;
          }
        }

        .button {
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          letter-spacing: 2px;
          font-size: 0.815rem;
        }

        .start {
          color: #fff;
          background: #dd0000;
          border-radius: 7px;
        }
        .end {
          color: #999999;
          background: #e5e5e5;
          border-radius: 7px;
        }
      }
    }
  }
}
.modalOpen {
  width: 80%;
  height: 150px;
  background-color: var(--backColor);
  position: fixed;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 99;
  color: var(--textColor);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 0 0;
  border-radius: 20px;

  .title {
    font-size: 1.3rem;
    font-weight: 700;
  }

  .content {
    font-size: 1rem;
    font-weight: 400;
    color: #ff0000;
  }

  .button {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-top: 1px solid #f5f5f5;
  }
}
/deep/ .van-dialog__message--has-title {
  color: #cf2021;
}
</style>
